<template>
    <div>
        <van-field
        :border="false"
        is-link
        readonly
        name="picker"
        label=""
        arrow-direction="down"
        placeholder="选择职级"
        @click="showPicker = true"
         input-align="right"
        :model-value="postLevelName"
        />

            
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom" teleport="body">
            <van-picker
                :columns="columns"
                :model-value="pickerValue"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
        </van-popup>
    </div>

</template>

<script lang="ts" setup>
import type { PickerConfirmEventParams } from 'vant';
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
    value:String
})

const emit = defineEmits(['select'])
const showPicker =  ref(false)
const pickerValue = ref(['']);
const postLevelName = ref('')
const columns = ref([
      { text: '所有职级', value: '' },
      { text: '校级', value: '1' },
      { text: '正职', value: '2' },
      { text: '副职', value: '3' },
]);

onMounted(()=>{
    if(props.value)pickerValue.value = [props.value]
})

watch(()=>props.value,()=>{
    console.log('set picker vlaue')
    if(props.value)pickerValue.value = [props.value]
})



const onConfirm = (val:PickerConfirmEventParams)=>{
    showPicker.value=false;
    console.log(val.selectedOptions[0]?.text)
    postLevelName.value =  val.selectedOptions[0]?.text + ''

    emit('select',val.selectedValues[0])
}


</script>